<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" import = "com.zzty.taskapp.entity.User"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet"
	href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script
	src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script
	src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ZZTY</title>
<!-- BOOTSTRAP STYLES-->
<link href="../css/bootstrap.css" rel="stylesheet" />

<!-- CUSTOM STYLES-->
<link href="../css/custom.css" rel="stylesheet" />
</head>
<script type="text/javascript">
	function getTime() {
		var date = new Date().toLocaleString();
		document.getElementById("date").value = date;
	}
	setInterval(getTime, 0);

	function ajaxCall(method, url, callBackFunction, date) {

		var httprequest = new XMLHttpRequest();
		httprequest.onreadystatechange = function() {
			if (httprequest.readyState == 4 && httprequest.status == 200) {
				callBackFunction(httprequest.responseText);
			}
		}
		httprequest.open(method, url, false);
		httprequest.setRequestHeader("X-Requested-With", "AJAX");
		httprequest.send(document.getElementById("operation").value);
	}

	function clickStart() {
		document.getElementById("operation").value = "judge";
		ajaxCall("Post", "../SelfExamTransationServlet", judge);
	}
	
	function judge(result) {
		if ("无法开始竞赛" == result) {
			alert(result);
		}else{
			document.getElementById("div1").style.display = "none";
			document.getElementById("div2").style.display = "block";
			var obj = JSON.parse(result);
			var count = obj.countdown;
			strs = count.split("_");
			document.getElementById("t_h").innerHTML = strs[0];
			document.getElementById("t_m").innerHTML = strs[1];
			document.getElementById("t_s").innerHTML = strs[2];
			setInterval(refreshCount, 1000);
			var qstContent = obj.qstContent;
			document.getElementById("tarea1").value = qstContent;
			
		}
	}

	function refreshCount() {
		if (document.getElementById("t_h").innerHTML == "已") {
			return;
		}
		var hour = document.getElementById("t_h").innerHTML.charAt(0);
		var minute = document.getElementById("t_m").innerHTML.charAt(0)
				+ document.getElementById("t_m").innerHTML.charAt(1);
		var second = document.getElementById("t_s").innerHTML.charAt(0)
				+ document.getElementById("t_s").innerHTML.charAt(1);

		var t = (hour * 3600) + (minute * 60) + (second * 1) - 1;
		if (t <= 0) {
			document.getElementById("t_h").innerHTML = "已";
			document.getElementById("t_m").innerHTML = "结";
			document.getElementById("t_s").innerHTML = "束";
		} else {
			var h = Math.floor(t / 60 / 60 % 24);
			var m = Math.floor(t / 60 % 60);
			var s = Math.floor(t % 60);

			document.getElementById("t_h").innerHTML = h + "时";
			if (m < 10) {
				m = "0" + m;
			}
			if (s < 10) {
				s = "0" + s;
			}
			document.getElementById("t_m").innerHTML = m + "分";
			document.getElementById("t_s").innerHTML = s + "秒";
		}
	}

	var flag = 0;

	function updateTotalTime(result) {
		if (result == "请勿重复提交") {
			flag = 1;
			alert(result);
		} 
	}

	function submit1() {
		document.getElementById("operation").value = "updateTotalTime";
		ajaxCall("Post", "../SelfExamTransationServlet", updateTotalTime);
		if (flag == 1) {
			return;
		}
		document.getElementById("form1").submit();
	}

	function judgeUploadButton(){
		var tmp = document.getElementById("inputfile").value.split(".")[1];
		
		if(document.getElementById("inputfile").value != "" && tmp == "txt"){
			document.getElementById("b1").value = "提交";
			document.getElementById("b1").disabled="";
		}else{
			document.getElementById("b1").value = "请选择文件";
			document.getElementById("b1").disabled="disabled";
		}
	}
	setInterval(judgeUploadButton, 0);
	
	<%
	User user = (User) request.getSession().getAttribute("user");
	String img = (String) user.getImg();
	%>
</script>
<body>

	<div id="wrapper">
		<nav class="navbar navbar-default navbar-cls-top " role="navigation"
			style="margin-bottom: 0">
			<div class="navbar-header">
				<!--                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse"> -->
				<!--                     <span class="sr-only">Toggle navigation</span> -->
				<!--                     <span class="icon-bar"></span> -->
				<!--                     <span class="icon-bar"></span> -->
				<!--                     <span class="icon-bar"></span> -->
				<!--                 </button> -->
				<a class="navbar-brand">自在天原</a>
			</div>
			<div
				style="color: white; padding: 15px 50px 5px 50px; float: right; font-size: 16px;">
				<form action="../loginOut.jsp" method="post">
					<button type="submit" class="btn btn-danger">注销</ button>
				</form>
			</div>
		</nav>
		<!-- /. NAV TOP  -->
		<nav class="navbar-default navbar-side" role="navigation">
			<div class="sidebar-collapse">
				<ul class="nav" id="main-menu">
					<li class="text-center"><img src="<%=img%>"
						class="user-image img-responsive" /></li>


					<li><a href="../index.jsp"><i
							class="fa fa-dashboard fa-3x"></i> 主页</a></li>
					<li><a href="UserInfo.jsp"><i class="fa fa-table fa-3x"></i>
							个人信息</a></li>
					<li><a href="SelfExam.jsp"><i class="fa fa-desktop fa-3x"></i>
							今日竞赛</a></li>
					<li><a href="TeamExam.jsp"><i class="fa fa-qrcode fa-3x"></i>
							今日结对</a></li>
					<li><a href="History.jsp"><i
							class="fa fa-bar-chart-o fa-3x"></i> 历史记录</a></li>

					<li><a href="ChangePassword.jsp"><i
							class="fa fa-edit fa-3x"></i> 密码修改 </a></li>


				</ul>

			</div>

		</nav>
		<!-- /. NAV SIDE  -->
		<div id="page-wrapper">
			<div id="page-inner">
				<div class="row">
					<div class="col-md-12">
						<h2>学员今日竞赛</h2>
					</div>
				</div>
				<!-- /. ROW  -->
				<hr />

				<div class="col-sm-offset-10 col-sm-2">
					<input id="date" style="background: transparent; border: none;"
						disabled="true"font-size:50px;"></input>
				</div>

				<div>
					<input id="operation" style="display: none;"></input>
				</div>
				<div id="div1"
					style="position: absolute; left: 50%; margin-left: -30px; top: 50%; margin-top: -30px;">
					<button type="button" class="btn btn-default btn-lg"
						style="height: 150px; width: 300px; font-size: 50px"
						onclick="clickStart()">
						<span class="glyphicon glyphicon-hand-right"></span> Start
					</button>

				</div>
				
				<div id="div2" style="display: none">
					<div class="col-sm-offset-0 col-sm-12">
						<h1>
							<span class="label label-info">今日竞赛</span>
						</h1>
						<br />
						<textarea id="tarea1" rows="20" cols="120"
							style="background: transparent" disabled="true"></textarea>
					</div>

					<div class="col-sm-offset-0 col-sm-12">
						<h3>
							<span class="label label-warning">距离结束还有: <span id="t_h"><input></span>
								<span id="t_m">.</span> <span id="t_s">.</span>
							</span>
						</h3>
					</div>

					<form id="form1" action="../SelfExamTransationServlet" method="post" enctype="multipart/form-data">
						<div class="col-sm-offset-6 col-sm-6">
							<h3>
								<font face="隶书" color="	">作业提交</font>
							</h3>
							<input type="file" id="inputfile" name = "fileName" accept=".txt"><br /> <input
								type="button" class="btn btn-success" value="请选择文件" id="b1" disabled ="disabled"
								onclick="submit1()"><br />
								<font color="#FF0000">Tip1:仅可提交一次，无法重复提交！</font><br />
								<font color="#FF0000">Tip2:仅可提交txt文件!</font>
						</div>
					</form>
					
				</div>
			</div>
		</div>
		<!-- /. PAGE INNER  -->
	</div>
	<!-- /. PAGE WRAPPER  -->

	<!-- /. WRAPPER  -->
	<!-- SCRIPTS -AT THE BOTOM TO REDUCE THE LOAD TIME-->
	<!-- JQUERY SCRIPTS -->
	<script src="../js/jquery-1.10.2.js"></script>
	<!-- BOOTSTRAP SCRIPTS -->
	<script src="../js/bootstrap.min.js"></script>
	<!-- METISMENU SCRIPTS -->
	<script src="../js/jquery.metisMenu.js"></script>



</body>
</html>
